<template>
    <div>
        <div class="swiper">
            <div class="swiper-wrapper">
                <slot></slot>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>
<script>
// 按需载入
// import Swiper from 'swiper'
// import 'swiper/swiper-bundle.css'
// import { Pagination } from 'swiper';
// Swiper.use([Pagination]);
//全部载入
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';


export default {
    props: {
        loop: {
            type: Boolean,
            default: true //默认值
        },
        // 一页显示几个
        slidesPerView: {  //转为驼峰式写法,方便this.调用
            type: Number,
            default: 1
        },
        spaceBetween: {
            type: Number,
            default: 0 
        }
    },
    mounted() {
         var mySwiper = new Swiper('.swiper', {
            //   direction: 'vertical', // 垂直切换选项
             loop: this.loop, // 循环模式选项
             slidesPerView: this.slidesPerView, // 每页显示几个
             spaceBetween:this.spaceBetween,
            // observer:true,
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            on: {
                slideChange: ()=> {  //注意,这里应该使用箭头函数
                    // console.log('改变了，activeIndex为' + this.activeIndex);
                    this.$emit('myslidechange', mySwiper.activeIndex)
                },
            },
        });
    },
    updated() {

    },
}
</script>

<style>
.swiper {
    height: 200px;
    color: red;
    background-color: rgb(246, 246, 246);
}

/* .swiper-slide {
    width: 100px;
    line-height: 40px;
    font-size: 30px;
    text-align: center;
    border: 1px solid pink;
} */
</style>